import React, { useMemo, useState, useRef, useInsertionEffect } from 'react'
import { View, Text, Image, StyleSheet, Animated } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import Swiper from 'react-native-swiper'
import variable from '../../store/variable'

export default function HomeSwiperWrap(props: { barHeight: number }) {
  const [index, setIndex] = useState(0)
  const [oldIndex, setOldIndex] = useState(0)
  const [key, setKey] = useState(1)
  const animated = useRef(new Animated.Value(0)).current
  const animated2 = animated.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  })
  const url = variable.resourceURL
  const [imgList] = useState([
    {
      id: 1,
      source: {
        uri: url + 'banner/banner1.jpg',
      },
    },
    {
      id: 2,
      source: {
        uri: url + 'banner/banner2.jpg',
      },
    },
    {
      id: 3,
      source: {
        uri: url + 'banner/banner3.jpg',
      },
    },
  ])
  useInsertionEffect(() => {
    Animated.timing(animated, {
      toValue: key === 0 ? 1 : 0,
      duration: 300,
      useNativeDriver: false,
    }).start()
  }, [key])
  const MemoSwiper = useMemo(
    () => <HomeSwiper list={imgList} onIndexChanged={onIndexChanged} />,
    [],
  )
  function onIndexChanged(newIndex: number) {
    setIndex(i => {
      setOldIndex(i)
      return newIndex
    })
    setKey(val => (val === 0 ? 1 : 0))
  }

  return (
    <View style={[styles.bannerWrap, { marginTop: -(props.barHeight + 50) }]}>
      <Animated.Image
        style={[styles.bgm, { opacity: animated }]}
        source={imgList[key === 0 ? index : oldIndex].source}
      />
      <Animated.Image
        style={[styles.bgm, { opacity: animated2 }]}
        source={imgList[key === 1 ? index : oldIndex].source}
      />
      <View style={styles.swiperWrap}>{MemoSwiper}</View>
      <View style={styles.bannerDot}>
        <Text style={styles.bannerDotT}>
          {index + 1}/{imgList.length}
        </Text>
      </View>
      <LinearGradient
        start={{ x: 0.5, y: 0.3 }}
        end={{ x: 0.5, y: 0.7 }}
        colors={['rgba(241,241,241,0)', '#f1f1f1']}
        style={styles.edgeFade}
      />
    </View>
  )
}
function HomeSwiper(props: {
  onIndexChanged?: (index: number) => void
  list: any[]
}) {
  return (
    <Swiper
      key="bannerSwiper"
      showsVerticalScrollIndicator={false}
      autoplay
      autoplayTimeout={5}
      showsButtons={false}
      showsPagination={false}
      onIndexChanged={props.onIndexChanged}
      alwaysBounceVertical={false}
    >
      {props.list.map((item: any) => (
        <View
          key={item.id}
          style={{ overflow: 'hidden', width: '100%', height: '100%' }}
        >
          <Image style={styles.bannerImg} source={item.source} />
        </View>
      ))}
    </Swiper>
  )
}

const styles = StyleSheet.create({
  bgm: {
    width: '100%',
    height: 310,
    position: 'absolute',
    left: 0,
    top: 0,
  },
  swiperWrap: {
    marginTop: 134,
    height: 120,
    marginLeft: 12,
    marginRight: 12,
    borderRadius: 4,
    overflow: 'hidden',
  },
  bannerWrap: {
    height: 320,
    position: 'relative',
  },
  bannerImg: {
    width: '100%',
    height: 310,
    marginTop: -134,
    resizeMode: 'cover',
  },
  bannerDot: {
    width: 30,
    height: 16,
    borderRadius: 8,
    position: 'absolute',
    right: 12,
    bottom: 36,
    backgroundColor: '#ffffff88',
  },
  bannerDotT: {
    color: '#f394a5',
    width: 30,
    fontSize: 10,
    lineHeight: 16,
    textAlign: 'center',
  },
  edgeFade: {
    height: 30,
    backgroundColor: 'transparent',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
})
